'use client';

import { useState,useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { VmsCopy } from '@/types/Model'
import TailwindAdvancedEditor from "@/components/tailwind/advanced-editor"
import { toast } from '@/hooks/use-toast'
import { Skeleton } from "@/components/ui/skeleton";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { DragDropContext, Droppable, Draggable, DropResult } from '@hello-pangea/dnd';
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink,BreadcrumbSeparator,BreadcrumbList } from "@/components/ui/breadcrumb";
import { MoreVertical, Plus, Trash, Search, Share, Folder, FolderOpen,Slash } from 'lucide-react';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input";

interface Copy {
  id: string;
  title: string;
  pxh: number;
}

interface Topic {
  id: string;
  name: string;
  pxh: number;
  copies: Copy[];
}


export default function Page() {
  const router = useRouter();
  // 搜索用
  const [searchDialogOpen, setSearchDialogOpen] = useState(false);
  const [searchTerm, setSearchTerm] = useState('');
  const [searchResults, setSearchResults] = useState<Array<{topic: Topic, copy: Copy}>>([]);
  // copy 数据
  const [copy, setCopy] = useState<VmsCopy | undefined>(undefined)
  const [copyLoading, setCopyLoading] = useState(false)
  // topic 数据
  const [expandedTopics, setExpandedTopics] = useState<Record<string, boolean>>({});
  const [selectedItem, setSelectedItem] = useState<{
    type: 'topic' | 'copy';
    topicId: string;
    copyId?: string;
  } | null>(null);

  const [topics, setTopics] = useState<Topic[]>([
    {
      id: 'topic1',
      name: '工作',
      pxh: 1,
      copies: [
        { id: 'copy1', title: '项目计划', pxh: 1 },
        { id: 'copy2', title: '会议记录', pxh: 2 }
      ]
    },
    {
      id: 'topic2',
      name: '个人',
      pxh: 2,
      copies: [
        { id: 'copy3', title: '读书笔记', pxh: 1 },
        { id: 'copy4', title: '旅行计划', pxh: 2 }
      ]
    }
  ]);


  // 添加搜索处理函数
  const handleSearch = (term: string) => {
    setSearchTerm(term);
    const results: Array<{topic: Topic, copy: Copy}> = [];
    
    topics.forEach(topic => {
      topic.copies.forEach(copy => {
        if (copy.title.toLowerCase().includes(term.toLowerCase())) {
          results.push({ topic, copy });
        }
      });
    });
    
    setSearchResults(results);
  };

    // 添加topic加载状态
    const [loading, setLoading] = useState(true);

    const fetchCopy = async (id: String, topicId?: string) => {
      setCopyLoading(true)
      try {
        const token = localStorage.getItem('token')
        const response = await fetch(`/api/copy/${id}`, {
          headers: {
            'Authorization': `Bearer ${token}`
          }
        })
        
        if (!response.ok) {
          throw new Error('Failed to fetch copy details')
        }
        
        const data = await response.json()
        // 在设置新内容前再次清除旧内容
        localStorage.removeItem("novel-content");
        if(data.content){
          localStorage.setItem("novel-content", JSON.stringify(data.content))
        }
        setCopy(data)
        // 设置选中状态和展开状态
        const tid = topicId || data.topic_id;
        setSelectedItem({ 
          type: 'copy', 
          topicId: tid, 
          copyId: id as string 
        });
        setExpandedTopics(prev => ({
          ...prev,
          [tid]: true
        }));
        toast({
          title: '数据获取成功',
          description: '文案详情已加载',
        })
      } catch (error) {
        console.error('Error fetching copy:', error)
        toast({
          title: '数据获取失败',
          description: error instanceof Error ? error.message : '未知错误',
          variant: 'destructive'
        })
      } finally {
        setCopyLoading(false)
      }
    }

    const saveCopy = async (copy: VmsCopy) => {
      try {
        const token = localStorage.getItem('token')
        const response = await fetch(`/api/copy`, {
          method: 'PUT',
          headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(copy)
        })
        
        if (!response.ok) {
          throw new Error('Failed to save copy')
        }
        
        toast({
          title: '保存成功',
          description: '文案已成功保存',
        })
        // 返回值保存更新到topics
        const data = await response.json();
        // 更新 topics 中对应的 copy
        const updatedTopics = topics.map(topic => {
          if (topic.id === data.topic_id) {
            const copyIndex = topic.copies.findIndex(c => c.id === data.id);
            const newCopies = [...topic.copies];
            
            if (copyIndex >= 0) {
              // 如果已存在，更新它
              newCopies[copyIndex] = {
                id: data.id,
                title: data.title,
                pxh: data.pxh
              };
            }
            
            return {
              ...topic,
              copies: newCopies
            };
          }
          return topic;
        });
        
        setTopics(updatedTopics);

   
      } catch (error) {
        console.error('Error saving copy:', error)
        toast({
          title: '保存失败',
          description: error instanceof Error ? error.message : '未知错误',
          variant: 'destructive'
        })
      }
    }

    // 添加获取数据的函数
    const fetchTopics = async () => {
      try {
        const token = localStorage.getItem('token');
        const response = await fetch('/api/notion', {
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token}`
          }
        });
  
        if (!response.ok) {
          if (response.status === 401) {
            router.push('/login');
            toast({
              title: '登录信息过期',
              description: '请重新登录',
              variant: 'destructive'
            });
            localStorage.clear();
            return;
          }
          throw new Error('获取数据失败');
        }
  
        const data = await response.json();
        setTopics(data);
        // 从 localStorage 获取上次查看的内容
        const lastViewed = localStorage.getItem('lastViewedCopy');
        if (lastViewed) {
          const { topicId, copyId } = JSON.parse(lastViewed);
          fetchCopy(copyId, topicId);
        } else if (data.length > 0 && data[0].copies.length > 0) {
          // 如果没有上次查看记录，则显示第一个文案
          fetchCopy(data[0].copies[0].id, data[0].id);
        }
      } catch (error) {
        console.error('获取话题失败:', error);
        toast({
          title: '获取数据失败',
          description: '请稍后重试',
          variant: 'destructive'
        });
      } finally {
        setLoading(false);
      }
    };
  
    // 组件加载时获取数据
    useEffect(() => {
      fetchTopics();
    }, []);

  const toggleTopic = (topicId: string) => {
    setExpandedTopics(prev => ({
      ...prev,
      [topicId]: !prev[topicId]
    }));
    
  };

  const handleTopicAction = async(action: string, topicId: string) => {
    switch(action) {
      case 'delete':
        setTopics(prev => prev.filter(t => t.id !== topicId));
        break;
      case 'duplicate':
        // Implement duplicate logic
        break;
      case 'rename':
        // Implement rename logic
      case 'addCopy':
        // Implement add copy logic
    // 如果没有内容,设置默认的文档结构
    const novelcopy = {
      type: "doc",
      content: [
        {
          type: "heading",
          attrs: { level: 1 },
          content: [{ type: "text", text: "新文案" }]
        },
        {
          type: "paragraph",
          content: [{ type: "text", text: "内容简介" }]
        },
        { type: "paragraph" },
        { type: "paragraph" }
      ]
    };
        const copy ={
          "id":"",
          "title":"新文案",
          "intro":"",
          "topic_id":topicId,
          "status":"文案编辑中",
          "script_num":0,
          "finished_script_num":0,
          "cjsj":new Date(),
          "content": JSON.stringify(novelcopy)
        }
        const token = localStorage.getItem('token')
        const response = await fetch('/api/copy', {
          method: 'POST',
          headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(copy)
        });
        if (!response.ok) {
          throw new Error('添加失败');
        }
        const data = await response.json();
        toast({
          title: '添加成功',
          description: '文案已成功添加',
        })

        localStorage.removeItem("novel-content")
        setTopics(prev => prev.map(t => ({
          ...t,
          copies: t.id === topicId ? [...t.copies, data] : t.copies
        })));

        break;

      default:
        break;
    }
  };

  const handleCopyAction = async (action: string, copyId: string) => {
    switch(action) {
      case 'delete':
        // 二次确认
        const confirmed = window.confirm('确定要删除吗？');
        if(confirmed){
          // 调用接口
          const token = localStorage.getItem('token');
          const response =await fetch(`/api/copy/${copyId}`, {
            method: 'DELETE',
            headers: {
              'Content-Type': 'application/json',
              'Authorization': `Bearer ${token}`
            }
          });
          if (!response.ok) {
            throw new Error('删除失败');
          }
          toast({
            title: '删除成功',
            description: '文案已成功删除',
          })

          setTopics(prev => prev.map(topic => ({
            ...topic,
            copies: topic.copies.filter(c => c.id !== copyId)
          })));
        }else{
          toast({
            title: '删除取消',
            description: '已取消删除',
          })
        }


        break;
      case 'duplicate':
        // Implement duplicate logic
        break;
      case 'share':
        // Implement share logic
        break;
      case 'rename':
        // Implement rename logic
        break;
      default:
        break;
    }
  };


  const handleTopicClick = (e: React.MouseEvent, topicId: string) => {
    e.stopPropagation();
    setSelectedItem({ type: 'topic', topicId });
    toggleTopic(topicId);
  };

  const handleCopyClick = (e: React.MouseEvent, topicId: string, copyId: string) => {
    e.stopPropagation();
    localStorage.removeItem("novel-content")
    // 保存当前查看的文案信息
    localStorage.setItem('lastViewedCopy', JSON.stringify({ topicId, copyId }));
    fetchCopy(copyId, topicId);
  };

  const getSelectedItemInfo = () => {
    if (!selectedItem) return null;

    const topic = topics.find(t => t.id === selectedItem.topicId);
    if (!topic) return null;

    if (selectedItem.type === 'copy' && selectedItem.copyId) {
      const copy = topic.copies.find(c => c.id === selectedItem.copyId);
      return copy ? { topic, copy } : null;
    }

    return { topic };
  };

  // 添加更新 pxh 的函数
const updateTopicsPxh = async (topics: Topic[]) => {
  try {
    const token = localStorage.getItem('token');
    const response = await fetch('/api/notion/topicPx', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${token}`
      },
      body: JSON.stringify({ topics })
    });

    if (!response.ok) {
      throw new Error('更新失败');
    }
  } catch (error) {
    console.error('更新排序失败:', error);
    toast({
      title: '更新排序失败',
      description: '请稍后重试',
      variant: 'destructive'
    });
  }
};

 // 添加更新 pxh 的函数
 const updateCopiesPxh = async (copies: Copy[]) => {
  try {
    const token = localStorage.getItem('token');
    const response = await fetch('/api/notion/copyPx', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${token}`
      },
      body: JSON.stringify({ copies })
    });

    if (!response.ok) {
      throw new Error('更新失败');
    }
  } catch (error) {
    console.error('更新排序失败:', error);
    toast({
      title: '更新排序失败',
      description: '请稍后重试',
      variant: 'destructive'
    });
  }
};

  const onDragEnd = async (result: DropResult) => {
    const { source, destination, type } = result;

    if (!destination) return;

    // 保存当前状态以便回滚
    const previousTopics = [...topics];

    if (type === 'TOPIC') {
      const newTopics = Array.from(topics);
    const [removed] = newTopics.splice(source.index, 1);
    newTopics.splice(destination.index, 0, removed);
    
    // 更新所有话题的 pxh
    const updatedTopics = newTopics.map((topic, index) => ({
      ...topic,
      pxh: index + 1
    }));
    
    try {
      // 先更新UI
      setTopics(updatedTopics);
      // 调用接口
      await updateTopicsPxh(updatedTopics);
    } catch (error) {
      // 失败时回滚到之前的状态
      setTopics(previousTopics);
    }
    } else if (type === 'COPY') {
      const sourceTopic = topics.find(topic => topic.id === source.droppableId);
  const destTopic = topics.find(topic => topic.id === destination.droppableId);

  if (!sourceTopic || !destTopic) return;

  const sourceCopies = Array.from(sourceTopic.copies);
  const destCopies = Array.from(destTopic.copies || []);
  const [removed] = sourceCopies.splice(source.index, 1);

  if (source.droppableId === destination.droppableId) {
    // 同一话题内拖拽
    sourceCopies.splice(destination.index, 0, removed);
    // 更新 copies 的 pxh
    const updatedCopies = sourceCopies.map((copy, index) => ({
      ...copy,
      pxh: index + 1
    }));
    const newTopics = topics.map(topic => 
      topic.id === sourceTopic.id ? { ...topic, copies: updatedCopies } : topic
    );
    try {
      // 先更新UI
      const newTopics = topics.map(topic => 
        topic.id === sourceTopic.id ? { ...topic, copies: updatedCopies } : topic
      );
      setTopics(newTopics);
      // 调用接口
      await updateCopiesPxh(updatedCopies);
    } catch (error) {
      // 失败时回滚
      setTopics(previousTopics);
   
    }
  } else {
    const updatedCopy = {
      ...removed,
      topic_id: destTopic.id
    };
    // 跨话题拖拽
    destCopies.splice(destination.index, 0, updatedCopy);
    // 更新两个话题的 copies 的 pxh
    const updatedSourceCopies = sourceCopies.map((copy, index) => ({
      ...copy,
      pxh: index + 1
    }));
    const updatedDestCopies = destCopies.map((copy, index) => ({
      ...copy,
      pxh: index + 1
    }));
    
    try {
      // 先更新UI
      const newTopics = topics.map(topic => {
        if (topic.id === sourceTopic.id) {
          return { ...topic, copies: updatedSourceCopies };
        }
        if (topic.id === destTopic.id) {
          return { ...topic, copies: updatedDestCopies };
        }
        return topic;
      });
      setTopics(newTopics);
      // 调用接口
      const allCopies = [...updatedSourceCopies, ...updatedDestCopies];
      await updateCopiesPxh(allCopies);
    } catch (error) {
      // 失败时回滚
      setTopics(previousTopics);
      toast({
        title: '更新失败',
        description: '已恢复原有顺序',
        variant: 'destructive'
      });
    }
      }
    }


    
  };

  

// 添加骨架屏组件
const TopicSkeleton = () => (
  <div className="space-y-4">
    {[1, 2, 3].map((i) => (
      <div key={i} className="space-y-2">
        <div className="flex items-center justify-between p-2">
          <div className="flex items-center gap-2">
            <Skeleton className="h-4 w-4" />
            <Skeleton className="h-4 w-24" />
          </div>
          <div className="flex items-center gap-2">
            <Skeleton className="h-4 w-4" />
            <Skeleton className="h-4 w-4" />
          </div>
        </div>
        <div className="pl-4 space-y-2">
          {[1, 2].map((j) => (
            <div key={j} className="flex items-center justify-between p-2">
              <Skeleton className="h-4 w-20" />
              <Skeleton className="h-4 w-4" />
            </div>
          ))}
        </div>
      </div>
    ))}
  </div>
);

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <div className="flex h-screen">
        <div className="w-64 bg-gray-100 p-4 flex flex-col">
        <div className="flex items-center gap-2 mb-2">
          <Dialog open={searchDialogOpen} onOpenChange={setSearchDialogOpen}>
            <DialogTrigger asChild>
              <div className="flex items-center gap-2 w-full cursor-pointer hover:bg-gray-200 p-2 rounded">
                <Search className="h-4 w-4 text-gray-500" />
                <span className="text-gray-500 text-sm">搜索文案...</span>
              </div>
            </DialogTrigger>
            <DialogContent className="sm:max-w-[425px]">
              <DialogHeader>
                <DialogTitle>搜索文案</DialogTitle>
              </DialogHeader>
              <div className="grid gap-4 py-4">
                <Input
                  placeholder="输入关键词搜索..."
                  value={searchTerm}
                  onChange={(e) => handleSearch(e.target.value)}
                  autoFocus
                />
                <div className="max-h-[300px] overflow-y-auto">
                  {searchResults.map(({ topic, copy }) => (
                    <div
                      key={copy.id}
                      className="flex flex-col gap-1 p-2 hover:bg-gray-100 cursor-pointer rounded"
                      onClick={() => {
                        handleCopyClick({ stopPropagation: () => {} } as React.MouseEvent, topic.id, copy.id);
                        setSearchDialogOpen(false);
                        setSearchTerm('');
                        setSearchResults([]);
                      }}
                    >
                      <div className="font-medium">{copy.title}</div>
                      <div className="text-sm text-gray-500">{topic.name}</div>
                    </div>
                  ))}
                  {searchTerm && searchResults.length === 0 && (
                    <div className="text-center text-gray-500 py-4">
                      未找到相关文案
                    </div>
                  )}
                </div>
              </div>
            </DialogContent>
          </Dialog>
        </div>


          <div className="flex justify-between my-4">
            <h2 className="text-lg font-semibold">项目文案管理</h2>
            {/* <button 
              className="btn-primary text-sm"
              onClick={() => handleTopicAction('addTopic', '')}
            >
              <Plus className="h-4 w-4" />
            </button> */}
          </div>

                    
          <div className="flex-1 overflow-y-auto">
            {loading ? (
              <TopicSkeleton />
            ) : (
            <Droppable droppableId="topics" type="TOPIC">
              {(provided) => (
                <div {...provided.droppableProps} ref={provided.innerRef}>
                  {topics.map((topic, index) => (
                    <Draggable key={topic.id} draggableId={topic.id} index={index}>
                      {(provided) => (
                        <div
                          ref={provided.innerRef}
                          {...provided.draggableProps}
                        >
                          <div 
                          className={`flex items-center justify-between p-2 hover:bg-gray-200 rounded cursor-pointer relative ${
                            selectedItem?.type === 'topic' && selectedItem.topicId === topic.id ? 'bg-gray-200' : ''
                          }`}
                            onClick={(e) => handleTopicClick(e,topic.id)}
                            {...provided.dragHandleProps}
                          >
                            <div className="flex items-center gap-2">
                            {expandedTopics[topic.id] ? (
                                <FolderOpen className="h-4 w-4"  />
                              ) : (
                                <Folder className="h-4 w-4" />
                              )}
                              <span className='truncate max-w-[160px]'>{topic.name}</span>
                             
                            </div>

                            <div className="flex items-center gap-2 absolute right-2 ">
                              {/* <DropdownMenu>
                                <DropdownMenuTrigger>
                                  <MoreVertical className="h-4 w-4" />
                                </DropdownMenuTrigger>
                                <DropdownMenuContent>
                                  <DropdownMenuItem onClick={() => handleTopicAction('rename', topic.id)}>
                                    <span>重命名</span>
                                  </DropdownMenuItem>
                                  <DropdownMenuItem onClick={() => handleTopicAction('duplicate', topic.id)}>
                                    <Copy className="mr-2 h-4 w-4" />
                                    <span>复制</span>
                                  </DropdownMenuItem>
                                  <DropdownMenuItem onClick={() => handleTopicAction('delete', topic.id)}>
                                    <Trash className="mr-2 h-4 w-4" />
                                    <span>删除</span>
                                  </DropdownMenuItem>
                                </DropdownMenuContent>
                              </DropdownMenu> */}
                              <span 
                                className='cursor-pointer'
                                onClick={(e) => {
                                e.stopPropagation();
                                handleTopicAction('addCopy', topic.id)
                                }}
                            >
                                <Plus className="h-4 w-4" />
                            </span>
                            </div>
                            
                          </div>
                          
                          {expandedTopics[topic.id] && (
                            <Droppable droppableId={topic.id} type="COPY">
                              {(provided) => (
                                <div
                                  className="pl-4"
                                  {...provided.droppableProps}
                                  ref={provided.innerRef}
                                >
                                  {topic.copies.length === 0 && (
                                    <div className="text-sm text-gray-400 py-2">
                                      将文案拖拽到此处
                                    </div>
                                  )}
                                  {topic.copies.map((copy, index) => (
                                    <Draggable key={copy.id} draggableId={copy.id} index={index}>
                                      {(provided) => (
                                        <div
                                          ref={provided.innerRef}
                                          {...provided.draggableProps}
                                          className={`p-2 hover:bg-gray-200 rounded cursor-pointer flex items-center justify-between group
                                            ${
                                              selectedItem?.type === 'copy' && selectedItem.copyId === copy.id 
                                              ? 'bg-gray-200 ' 
                                              : ''
                                            }`}
                                          {...provided.dragHandleProps}
                                          onClick={(e) => handleCopyClick(e, topic.id, copy.id)}
                                        >
                                           <div className='truncate max-w-[180px]'>
                                            {copy.title}
                                          </div>
                                          <div className='opacity-0 group-hover:opacity-100 transition-opacity'>
                                          <DropdownMenu>
                                            <DropdownMenuTrigger>
                                              <MoreVertical className="h-4 w-4" />
                                            </DropdownMenuTrigger>
                                            <DropdownMenuContent>
                                              {/* <DropdownMenuItem onClick={() => handleCopyAction('rename', copy.id)}>
                                                <span>重命名</span>
                                              </DropdownMenuItem>
                                              <DropdownMenuItem onClick={() => handleCopyAction('duplicate', copy.id)}>
                                                <Copy className="mr-2 h-4 w-4" />
                                                <span>复制</span>
                                              </DropdownMenuItem>
                                              <DropdownMenuItem onClick={() => handleCopyAction('share', copy.id)}>
                                                <Share className="mr-2 h-4 w-4" />
                                                <span>分享</span>
                                              </DropdownMenuItem> */}
                                              <DropdownMenuItem onClick={() => handleCopyAction('delete', copy.id)}>
                                                <Trash className="mr-2 h-4 w-4" />
                                                <span>删除</span>
                                              </DropdownMenuItem>
                                            </DropdownMenuContent>
                                          </DropdownMenu>
                                          </div>
                                        </div>
                                      )}
                                    </Draggable>
                                  ))}
                                  {provided.placeholder}
                                </div>
                              )}
                            </Droppable>
                          )}
                        </div>
                      )}
                    </Draggable>
                  ))}
                  {provided.placeholder}
                </div>
              )}
            </Droppable>
            )}
          </div>
       
        </div>
        
           {/* 右侧内容区域 */}
        <div className="flex-1 p-8 h-screen overflow-scroll">
          <div className="flex flex-col gap-4 ml-10">
            {/* 面包屑导航 */}
            {getSelectedItemInfo() && (
              <Breadcrumb>
                <BreadcrumbList>
                  <BreadcrumbItem>
                    <BreadcrumbLink href="#" className="flex items-center text-gray-500 hover:text-gray-900">
                      <span>我的项目</span>
                    </BreadcrumbLink>
                  </BreadcrumbItem>
                  <BreadcrumbSeparator>
                    <Slash className="h-4 w-4" />
                  </BreadcrumbSeparator>
                  <BreadcrumbItem>
                    <BreadcrumbLink href="#" className="flex items-center text-gray-500 hover:text-gray-900">
                      <span>{getSelectedItemInfo()?.topic.name}</span>
                    </BreadcrumbLink>
                  </BreadcrumbItem>
                  {getSelectedItemInfo()?.copy && (
                    <>
                      <BreadcrumbSeparator>
                        <Slash className="h-4 w-4" />
                      </BreadcrumbSeparator>
                      <BreadcrumbItem>
                        <BreadcrumbLink href="#" className="flex items-center text-gray-500 hover:text-gray-900">
                          <span>{getSelectedItemInfo()?.copy?.title}</span>
                        </BreadcrumbLink>
                      </BreadcrumbItem>
                    </>
                  )}
                </BreadcrumbList>
              </Breadcrumb>
            )}
          </div>
          
          {/* 页面内容将显示在这里 */}

          { copyLoading && (
            <>
              <div className="flex justify-center items-center h-64">
                {/* <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div> */}
              </div>
            </>
          )}

        { !copyLoading && (
            <>
          <div className='flex justify-center w-full py-8' >
            <TailwindAdvancedEditor 
                key={copy?.id} // 添加 key 属性
                copy={copy}
                saveCopy={saveCopy}
            />
          </div>
          </>
          )}

        </div>
      </div>
    </DragDropContext>
  );
}